<template>
  <div class="app-container">
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="filters"
      class="demo-form-inline filter-container"
    >
      <el-form-item label="类别名" prop="name">
          <el-input type="text" v-model="filters.name" @keyup.enter.native="gridSearch"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="filters.status">
          <el-option
            v-for="item in statusArray"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="最后操作人：" prop="lastOperator">
        <el-input v-model="filters.lastOperator" @keyup.enter.native="gridSearch"></el-input>
      </el-form-item>

      <el-form-item label="最后操作时间：" prop="time">
        <el-date-picker
          v-model="filters.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="left"
        ></el-date-picker>
      </el-form-item>

      <el-button type="primary" v-waves icon="el-icon-search" @click="gridSearch">搜索</el-button>
      <el-button @click="selfResetForm('ruleForm')">重置</el-button>
    </el-form>
    <el-button
      v-if="roleCheck('tickling-add')"
      type="primary"
      @click="openDialog({dialogName: 'feedback-type-edit',props: {}})"
      style="margin:10px 0"
    >添加新类别</el-button>
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" align="center" type="index"></el-table-column>
      <el-table-column label="类别名" align="center" prop="name"></el-table-column>
      <el-table-column label="类别描述" align="center" prop="describes"></el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{row}">{{row.status==0?'禁用':'启用'}}</template>
      </el-table-column>
      <el-table-column label="最后操作时间" align="center">
        <template slot-scope="{row}">{{row.lastUpdate | toTime}}</template>
      </el-table-column>
      <el-table-column label="最后操作人" align="center">
        <template slot-scope="{row}">{{row.lastOperator}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button
            v-if="roleCheck('tickling-edit')"
            type="text"
            @click="openDialog({dialogName: 'feedback-type-edit',
                     props: row
                     })"
          >编辑</el-button>
          <el-button
            v-if="roleCheck('tickling-forbidden')"
            type="text"
            @click="switchStatus(row)"
          >{{row.status==0?'启用':'禁用'}}</el-button>
          <el-button
            v-if="roleCheck('tickling-del')"
            type="text"
            @click="handleDelete(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :before-close="() => {dialogVisible = false}">
      <feedback-type-edit
        style="max-height:60vh; overflow: auto"
        :id="dialogProps.id"
        :row-data="dialogProps"
        @on-success="dialogVisible = false;
                   doGet({action: 'getGrid'})"
        v-if="dialogName === 'feedback-type-edit'"
      ></feedback-type-edit>
    </el-dialog>
  </div>
</template>

<script>
import {
  form, resetForm, grid, dialog,
} from '@/build';

import {
  feedbackTypeListApi,
  feedbackTypeDeleteApi,
  feedbackTypeSwitchApi,
} from '@/services/api/feedbackType';

import FeedbackTypeEdit from './feedbackTypeEdit';

export default {
  name: 'feedback-type-list',

  mixins: [form, resetForm, grid, dialog],

  components: {
    FeedbackTypeEdit,
  },

  props: {
    departmentId: Number,
    workId: Number,
  },

  data() {
    return {
      operatorList: [],
      statusArray: [
        {
          value: '',
          name: '全部',
        },
        {
          value: 0,
          name: '禁用',
        },
        {
          value: 1,
          name: '启用',
        },
      ],
      tableData: [],
      filters: {
        name: undefined,
        lastOperator: undefined,
        status: undefined,
        time: [
          moment().format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD 23:59:59'),
        ],
        // page:1,
        // size: 20,
      },
      filterDateType: false,
    };
  },

  methods: {
    // 启用禁用
    switchStatus(row) {
      const { status } = row;
      const { id } = row;
      const action = row.status == 0 ? '启用' : '禁用';
      this.$confirm(`确定要${action}此反馈类别吗？`, `${action}反馈类别`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          feedbackTypeSwitchApi({
            id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({ action: 'getGrid' });
              this.$message({
                type: 'success',
                message: `${action}成功!`,
              });
            } else {
              this.$message({
                type: 'error',
                message: `${action}失败!${data.message}`,
              });
            }
          });
        })
        .catch(() => {});
    },
    // 删除
    handleDelete({ id }) {
      this.$confirm('确定要删除此反馈类别吗？', '删除反馈类别', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          feedbackTypeDeleteApi({
            id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({ action: 'getGrid' });
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
            } else {
              this.$message({
                type: 'error',
                message: `删除失败!${data.message}`,
              });
            }
          });
        })
        .catch(() => {});
    },
    selfResetForm(formName) {
      this.resetForm(formName);
      this.gridSearch();
    },
    // submitFilterForm() {
    //   const { time } = this.filters;
    //   let startDate = undefined,
    //     endDate = undefined;
    //   if (!_.isUndefined(time) && _.isArray(time)) {
    //     startDate = time[0];
    //     endDate = time[1];
    //   }
    //   this.filters = { ...this.filters, startDate, endDate };
    //   this.gridSearch();
    // },
  },

  mounted() {
    this.bindGet(feedbackTypeListApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        const { time } = data;
        let startDate;
        let endDate;
        if (time && _.isArray(time)) {
          startDate = time[0];
          endDate = time[1];
        }
        return { ...this.filters, startDate, endDate };
      },
    });
    this.getAll();
  },
};
</script>
